<template>
	<view>
		<view style="padding: 30upx;" class="color-font-gray">为了保障本社区内的住户能够享受高品质的服务，请提供您的真实有效信息以供物业中心进行验证</view>
		<view class="build_content">
			<view class="uni-flex-center">
				<view class="change-build uni-cell-90" >
					<text class="uni-cell-30">请选择小区</text>
					<input class="uni-cell-70"  @click="changeCommunity" disabled="true" v-model="community.community_name" placeholder="请选择小区" />
				</view>
			</view>
			<view class="uni-flex-center">
				<view class="change-build uni-cell-90">
					<text class="uni-cell-30">请选择组团</text>
					<input class="uni-cell-70" @tap="changeGroup" disabled="true" v-model="group.group" placeholder="请选择组团" />
				</view>
			</view>
			<view class="uni-flex-center">
				<view class="change-build uni-cell-90">
					<text class="uni-cell-30">请选择楼栋</text>
					<input class="uni-cell-70" @tap="changeBuilding" disabled="true" v-model="building.building" placeholder="请选择楼栋" />
				</view>
			</view>
			<view class="uni-flex-center">
				<view class="change-build uni-cell-90">
					<text class="uni-cell-30">请选择单元</text>
					<input class="uni-cell-70" @tap="changeUnit" disabled="true" v-model="unit.unit" placeholder="请选择单元" />
				</view>
			</view>
			<view class="uni-flex-center">
				<view class="change-build uni-cell-90">
					<text class="uni-cell-30">请选择房号</text>
					<input class="uni-cell-70" @tap="changeRoom" disabled="true" v-model="room.room" placeholder="请选择房号" />
				</view>
			</view>

			<view class="information">
				<catLabel dataType="text" text="姓名" v-model="name" placeholder="请输入姓名" />
				<catLabel dataType="text" inputType="number" text="手机号" v-model="mobile" :maxlength="11"  placeholder="请输入手机号" />
			</view>
		</view>

		<button class="foot-btn bg-gradient-btn" :disabled="disabledBtn" @click="submit">提交认证</button>
	</view>
</template>

<script>
import {bindRoom} from "@/api/room.js";
import catLabel from '@/components/cat-label/cat-label.vue';
export default {
	components: {
		catLabel
	},
	data() {
		return {
			disabled: true,
			mobile: "",
			name:"",
			selectTowerList: [],
			disabledBtn: true
		};
	},
	computed: {
		community(){
			return this.$store.state.community;
		},
		group() {
			return this.$store.state.group;
		},
		building() {
			return this.$store.state.building;
		},
		unit() {
			return this.$store.state.unit;
		},
		room() {
			if (this.$store.state.room.id) {
				this.disabledBtn = false;
			}
			return this.$store.state.room;
		}
	},
	onShow() {},
	methods: {
		changeCommunity() {
			console.log("yangzl");
			this.$to(`/pages/bound-house/add-community`);
		},
		changeGroup() {
			if (!this.$store.state.community.id && this.$store.state.community.id !== 0) {
				uni.showToast({
					icon: 'none',
					title: '请先选择小区'
				});
				return;
			}
			this.$to(`/pages/bound-house/add-group`)
		},
		
		changeBuilding() {
			if (!this.$store.state.community.id && this.$store.state.community.id !== 0) {
				uni.showToast({
					icon: 'none',
					title: '请先选择小区'
				});
				return;
			}
			if (!this.$store.state.group.group) {
				uni.showToast({
					icon: 'none',
					title: '请先选择组团'
				});
				return;
			}
			this.$to(`/pages/bound-house/add-building`);
			//this.$Router.push({name:'add-tower',params:{data:this.$store.state.village.id}})
		},
		changeUnit() {
			if (!this.$store.state.community.id && this.$store.state.community.id !== 0) {
				uni.showToast({
					icon: 'none',
					title: '请先选择小区'
				});
				return;
			}
			if (!this.$store.state.group.group) {
				uni.showToast({
					icon: 'none',
					title: '请先选择组团'
				});
				return;
			}
			if (!this.$store.state.building.building) {
				uni.showToast({
					icon: 'none',
					title: '请先选择楼栋'
				});
				return;
			}
			this.$to(`/pages/bound-house/add-unit`);
		},
		changeRoom() {
			if (!this.$store.state.community.id && this.$store.state.community.id !== 0) {
				uni.showToast({
					icon: 'none',
					title: '请先选择小区'
				});
				return;
			}
			if (!this.$store.state.group.group) {
				uni.showToast({
					icon: 'none',
					title: '请先选择组团'
				});
				return;
			}
			if (!this.$store.state.building.building) {
				uni.showToast({
					icon: 'none',
					title: '请先选择楼栋'
				});
				return;
			}
			if (!this.$store.state.unit.unit) {
				uni.showToast({
					icon: 'none',
					title: '请先选择单元'
				});
				return;
			}
			this.$to(`/pages/bound-house/add-room`);
		},
		submit() {
			console.log(this.community);
			console.log(this.room);
			let data = {
				mobile: this.mobile, //		身份证号
				name: this.name, //		项目id
				room_id: this.room.id ,//房间号
				address: this.room.address ,//房间号
				community_id:this.room.community_id,
				community_name:this.community.community_name
			};
			if(!this.name){
				uni.showToast({
					icon:'none',
					title:'请输入姓名'
				})
				return;
			}
			if(!this.mobile){
				uni.showToast({
					icon:'none',
					title:'请输入手机号'
				})
				return;
			}
			if(!this.$uitls.isPhone(this.mobile)){
				uni.showToast({
					icon:'none',
					title:'请输入正确的手机号'
				})
				return;
			}
			this.$store.commit('setMyRoom',{
				address:this.room.address,
				room_id:this.room.id
			});
			let that=this;
			bindRoom(data).then((res)=>{
				console.log(res.data.code);
				if(res.data.code==0){
					uni.showModal({
						title:"提示",
						content:res.data.data,
						showCancel:false,
						success: (res) => {
							if (res.confirm) {
								uni.navigateBack();
								//that.$to(`/pages/user/my-house/my-house`);
							}
						}
					})
				}else{
					console.log(res.data.msg);
					uni.showModal({
						title:"提示",
						content:res.data.msg,
						showCancel:false,
						success: (res) => {
							if (res.confirm) {
								
							}
						}
					})
				}
			})
		}
	}
};
</script>

<style lang="scss">
.build_content {
	width: 100%;
	background: #ffffff;
	margin-bottom: 120upx;
}
.change-build {
	display: flex;
	height: 40upx;
	border-bottom: 0.8upx solid #c9ccd3;
	padding: 11px 0px;
	input {
		line-height: 80upx;
	}
}
.information {
	margin-top: 80upx;
}
.foot-btn {
	width: 100%;
	border: none;
	height: 100upx;
	line-height: 100upx;
	background: #ff8402;
	color: #ffffff;
	text-align: center;
	position: fixed;
	bottom: 0upx;
	border-radius: 0upx;
}
</style>
